CSS Colors

CSS 140+ நிறப் பெயர்கள், HEX மதிப்புகள் #FF0000, RGB மதிப்புகள் rgb(255, 0, 0), RGBA மதிப்புகள் rgba(255, 0, 0, 0.5), HSL மதிப்புகள் hsl(0, 100%, 50%), HSLA மதிப்புகள் hsla(0, 100%, 50%, 0.5) மற்றும் ஒளிப்புக்மை (opacity) ஆகியவற்றை ஆதரிக்கிறது.

HEX மதிப்புகள்

#FF0000

#00FF00

#0000FF

RGB மதிப்புகள்

rgb(255, 0, 0)

rgb(0, 255, 0)

rgb(0, 0, 255)

நிறப் பெயர்கள்

red

green

blue

🎨 Jassif Team உதவிக்குறிப்பு:

CSS இல் பல்வேறு வழிகளில் நிறங்களைக் குறிப்பிடலாம். தனிப்பட்ட தேவைகளுக்கு ஏற்ற வழியைத் தேர்ந்தெடுக்கவும். RGBA மற்றும் HSLA வெளிப்படைத்தன்மையுடன் (transparency) பணிபுரிய பயனுள்ளதாக இருக்கும்.

RGBA Colors

RGBA நிற மதிப்புகள் ஒரு ஆல்ஃபா சேனலுடன் RGB நிறங்களின் நீட்டிப்பாகும் - இது ஒரு நிறத்திற்கான ஒளிப்புக்மையை (opacity) குறிப்பிடுகிறது.

ஒரு RGBA நிற மதிப்பு இவ்வாறு குறிப்பிடப்படுகிறது:

rgba(red, green, blue, alpha)

ஆல்ஃபா அளவுரு 0.0 (முற்றிலும் வெளிப்படையானது) மற்றும் 1.0 (முற்றிலும் ஒளிபுகாதது) இடையே உள்ள ஒரு எண்ணாகும்.

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

0.2

0.4

0.6

0.8

எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டு வெவ்வேறு RGBA நிறங்களை வரையறுக்கிறது:

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* ஒளிப்புக்மையுடன் சிவப்பு */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* ஒளிப்புக்மையுடன் பச்சை */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* ஒளிப்புக்மையுடன் நீலம் */

முடிவு:

RGBA
சிவப்பு
rgba(255,0,0,0.3)

RGBA
பச்சை
rgba(0,255,0,0.3)

RGBA
நீலம்
rgba(0,0,255,0.3)

🔍 Jassif Team விளக்கம்:

RGBA என்பது Red, Green, Blue, Alpha என்பதன் சுருக்கமாகும். Alpha சேனல் நிறத்தின் வெளிப்படைத்தன்மையை (transparency) கட்டுப்படுத்துகிறது. 0.0 என்பது முழுமையாக வெளிப்படையானது, 1.0 என்பது முழுமையாக ஒளிபுகாதது.

HSLA Colors

HSLA நிற மதிப்புகள் ஒரு ஆல்ஃபா சேனலுடன் HSL நிறங்களின் நீட்டிப்பாகும் - இது ஒரு நிறத்திற்கான ஒளிப்புக்மையை (opacity) குறிப்பிடுகிறது.

ஒரு HSLA நிற மதிப்பு இவ்வாறு குறிப்பிடப்படுகிறது:

hsla(hue, saturation, lightness, alpha)

ஆல்ஃபா அளவுரு 0.0 (முற்றிலும் வெளிப்படையானது) மற்றும் 1.0 (முற்றிலும் ஒளிபுகாதது) இடையே உள்ள ஒரு எண்ணாகும்:

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

30%

50%

70%

90%

எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டு வெவ்வேறு HSLA நிறங்களை வரையறுக்கிறது:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* ஒளிப்புக்மையுடன் பச்சை */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* ஒளிப்புக்மையுடன் இலகு பச்சை */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* ஒளிப்புக்மையுடன் இருள் பச்சை */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* ஒளிப்புக்மையுடன் பாஸ்டல் பச்சை */

முடிவு:

HSLA
பச்சை
hsla(120,100%,50%,0.3)

HSLA
இலகு பச்சை
hsla(120,100%,75%,0.3)

HSLA
இருள் பச்சை
hsla(120,100%,25%,0.3)

HSLA
பாஸ்டல் பச்சை
hsla(120,60%,70%,0.3)

🌈 Jassif Team விளக்கம்:

HSLA என்பது Hue, Saturation, Lightness, Alpha என்பதன் சுருக்கமாகும். HSL வடிவம் நிறங்களைக் கையாள்வதற்கு மிகவும் உள்ளுணர்வு வழியை வழங்குகிறது. Hue என்பது வட்ட வண்ண சக்கரத்தில் 0-360 டிகிரி, Saturation என்பது நிற தீவிரம் (0-100%), Lightness என்பது வெளிச்சம் (0-100%).

CSS opacity Property

opacity பண்பு முழு உறுப்புக்கான ஒளிப்புக்மையை அமைக்கிறது (பின்னணி நிறம் மற்றும் உரை இரண்டும் ஒளிபுகாத/வெளிப்படையானதாக இருக்கும்).

opacity பண்பு மதிப்பு 0.0 (முற்றிலும் வெளிப்படையானது) மற்றும் 1.0 (முற்றிலும் ஒளிபுகாதது) இடையே உள்ள ஒரு எண்ணாக இருக்க வேண்டும்.

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

opacity: 0.2

opacity: 0.4

opacity: 0.6

opacity: 0.8

⚠️ முக்கிய குறிப்பு:

உறுப்புக்குள் உள்ள உரையும் வெளிப்படையான/ஒளிபுகாததாக மாறும் என்பதை கவனிக்கவும்!

எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டு ஒளிப்புக்மையுடன் கூடிய வெவ்வேறு உறுப்புகளைக் காட்டுகிறது:

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* ஒளிப்புக்மையுடன் சிவப்பு */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* ஒளிப்புக்மையுடன் பச்சை */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* ஒளிப்புக்மையுடன் நீலம் */

முடிவு - வெவ்வேறு ஒளிப்புக்மை நிலைகள்:

opacity: 0.2
rgb(255,0,0)

opacity: 0.4
rgb(255,0,0)

opacity: 0.6
rgb(255,0,0)

opacity: 0.8
rgb(255,0,0)

🎯 RGBA/HSLA vs opacity:

RGBA/HSLA: நிறத்தின் ஒளிப்புக்மையை மட்டும் கட்டுப்படுத்துகிறது. உரை மற்றும் பிற உள்ளடக்கம் பாதிப்படையாது.
opacity: முழு உறுப்பின் ஒளிப்புக்மையை கட்டுப்படுத்துகிறது. உரை, பின்னணி, எல்லைகள் அனைத்தும் பாதிப்படையும்.

வெவ்வேறு நிற வடிவங்களின் ஒப்பீடு

நிற வடிவம்	எடுத்துக்காட்டு	பயன்பாடு	ஆல்ஃபா சேனல்
RGB	rgb(255, 0, 0)	அடிப்படை நிறங்கள்	இல்லை
RGBA	rgba(255, 0, 0, 0.5)	வெளிப்படைத்தன்மையுடன் கூடிய நிறங்கள்	ஆம் (0.0-1.0)
HSL	hsl(0, 100%, 50%)	நிறம், தீவிரம், வெளிச்சத்தின் அடிப்படையில்	இல்லை
HSLA	hsla(0, 100%, 50%, 0.5)	வெளிப்படைத்தன்மையுடன் கூடிய HSL நிறங்கள்	ஆம் (0.0-1.0)
HEX	#FF0000	வலை மேம்பாட்டில் பொதுவானது	இல்லை
நிறப் பெயர்	red	எளிமையான பயன்பாடு	இல்லை

CSS Colors பயிற்சி

உங்கள் CSS நிறங்கள் அறிவைச் சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

❓ RGBA மற்றும் HSLA இல் உள்ள ஆல்ஃபா சேனல் எதைக் குறிப்பிடுகிறது?

நிறத்தின் வண்ணத்தை (Hue)

✗ தவறு! வண்ணம் (Hue) என்பது நிறத்தின் அடிப்படை வண்ணத்தைக் குறிக்கிறது, ஆல்ஃபா சேனல் அல்ல

நிறத்தின் வெளிப்படைத்தன்மையை (Transparency)

✓ சரி! ஆல்ஃபா சேனல் நிறத்தின் வெளிப்படைத்தன்மை அல்லது ஒளிப்புக்மையைக் குறிப்பிடுகிறது. 0.0 முற்றிலும் வெளிப்படையானது, 1.0 முற்றிலும் ஒளிபுகாதது

நிறத்தின் பிரகாசத்தை (Brightness)

✗ தவறு! பிரகாசம் HSLA இல் Lightness மூலம் கட்டுப்படுத்தப்படுகிறது, ஆல்ஃபா சேனல் அல்ல

நிறத்தின் செறிவை (Saturation)

✗ தவறு! செறிவு (Saturation) என்பது நிறத்தின் தீவிரத்தைக் குறிக்கிறது, ஆல்ஃபா சேனல் அல்ல

நடைமுறை எடுத்துக்காட்டுகள்

1. RGBA ஐப் பயன்படுத்தி கண்ணி பின்னணி:

/* ஒளி கண்ணி பின்னணி */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

/* வெளிப்படையான பட்டன் */
.primary-button {
    background-color: rgba(52, 152, 219, 0.8);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.primary-button:hover {
    background-color: rgba(52, 152, 219, 1);
}

2. HSLA ஐப் பயன்படுத்தி நிறத் தொகுப்பு:

/* அடிப்படை நிறம் */
:root {
    --primary-hue: 200;
}

/* வெவ்வேறு ஒளிப்புக்மை நிலைகள் */
.primary-color {
    background-color: hsla(var(--primary-hue), 100%, 50%, 1);
}

.primary-color-light {
    background-color: hsla(var(--primary-hue), 100%, 50%, 0.7);
}

.primary-color-lighter {
    background-color: hsla(var(--primary-hue), 100%, 50%, 0.4);
}

.primary-color-very-light {
    background-color: hsla(var(--primary-hue), 100%, 50%, 0.1);
}

🚀 Jassif Team உதவிக்குறிப்பு:

RGBA மற்றும் HSLA நிறங்களை CSS மாறிகள் (variables) உடன் இணைத்துப் பயன்படுத்தினால், உங்கள் வலைத்தளத்தில் நிற ஒருமைப்பாட்டை எளிதாக பராமரிக்க முடியும். ஒரே நிறத்தின் வெவ்வேறு ஒளிப்புக்மை நிலைகளை உருவாக்க இது சிறந்த வழியாகும்.

சுருக்கம்

RGBA மற்றும் HSLA ஆல்ஃபா சேனல் மூலம் நிறங்களுக்கு வெளிப்படைத்தன்மையைச் சேர்க்கின்றன

opacity பண்பு முழு உறுப்பையும் (உரை உட்பட) வெளிப்படையாக்குகிறது

RGBA: Red , Green , Blue , Alpha (0.0 முதல் 1.0 வரை)

HSLA: Hue (0-360°), Saturation (0-100%), Lightness (0-100%), Alpha (0.0-1.0)

வெளிப்படைத்தன்மை தேவைப்படும் இடங்களுக்கு RGBA/HSLA பயன்படுத்தவும், முழு உறுப்புக்கு opacity பயன்படுத்தவும்

🎨 Jassif Team இறுதி உதவிக்குறிப்பு:

நவீன வலை வடிவமைப்பில் வெளிப்படைத்தன்மை முக்கிய பங்கு வகிக்கிறது. RGBA மற்றும் HSLA நிறங்களைப் பயன்படுத்தி அழகான கண்ணி ஜன்னல்கள், நிழல் விளைவுகள், சுருக்க பட்டன்கள் மற்றும் பல்வேறு காட்சி விளைவுகளை உருவாக்கலாம். எப்போதும் பயனர் அனுபவத்தை மனதில் வைத்து, மிகையான வெளிப்படைத்தன்மையைத் தவிர்க்கவும்.